<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Ion.RangeSlider - test</title>
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/ion.rangeSlider.css" />
    <link rel="stylesheet" href="css/ion.rangeSlider.skinFlat.css" />
</head>
<body>


<!-- Page contents -->
<div style="position: relative; padding: 200px;">

    <div>
        <input type="text" id="range_55" value="" name="range_55" />
    </div>

</div>




<!-- All JS -->
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/ion.rangeSlider.js"></script>

<script>

    $(function () {

        var $range = $("#range_55");
        var $disable_btn = $(".js-disable-55");
        var $block_btn = $(".js-block-55");

        var disabled = false;
        var blocked = false;
        var slider;

        $range.ionRangeSlider({
            type: "single",
            min: 0,
            max: 50,
            from: 25,
            grid: true
        });

        slider = $range.data("ionRangeSlider");

        $disable_btn.on("click", function () {
            if (disabled) {
                slider.update({"disable": false});
                disabled = false;
            } else {
                slider.update({"disable": true});
                disabled = true;
            }
        });

        $block_btn.on("click", function () {
            if (blocked) {
                slider.update({"block": false});
                blocked = false;
            } else {
                slider.update({"block": true});
                blocked = true;
            }
        });

    });
</script>




</body>
</html>
